import {
    Row,
    Col,
    Form,
    Input,
    Modal,
} from 'antd';

const FormItem = Form.Item;

//新增表单
const CreateForm = Form.create()(props => {
    const { modalVisible, form, handleAdd, handleModalVisible } = props;
const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
        if (err) return;
    form.resetFields();
    handleAdd(fieldsValue);
});
};
return (
    <Modal
width={800}
height={800}
destroyOnClose
title="新增"
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<Form  layout="vertical" hideRequiredMark>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>


        <Col  md={12} sm={24}>
        <FormItem  label="操作名称">
            {form.getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入至少五个字符的操作名称！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>




        <Col  md={12} sm={24}>
        <FormItem  label="英文名称">
            {form.getFieldDecorator('enname', {
            rules: [{ required: true, message: '请输入至少五个字符的英文名称！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>



    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>


        <Col  md={12} sm={24}>
        <FormItem  label="操作方法">
            {form.getFieldDecorator('handler', {
            rules: [{ required: false, message: '请输入至少五个字符的操作方法！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>



        <Col  md={12} sm={24}>
        <FormItem  label="图标">
            {form.getFieldDecorator('icon', {
            rules: [{ required: false, message: '请输入至少五个字符的图标！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>



    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



        <Col  md={12} sm={24}>
        <FormItem  label="状态">
            {form.getFieldDecorator('status', {
            rules: [{ required: true, message: '请输入至少五个字符的状态！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>


        <Col  md={12} sm={24}>
        <FormItem  label="排序">
            {form.getFieldDecorator('orderid', {
            rules: [{ required: false, message: '请输入至少五个字符的排序！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>


    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



        <Col  md={12} sm={24}>
        <FormItem  label="上级id">
            {form.getFieldDecorator('pid', {
            rules: [{ required: false, message: '请输入至少五个字符的上级id！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>



        <Col  md={12} sm={24}>
        <FormItem  label="菜单id">
            {form.getFieldDecorator('menid', {
            rules: [{ required: false, message: '请输入至少五个字符的菜单id！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>
    </Row>
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>




        <Col  md={12} sm={24}>
        <FormItem  label="html页面Id">
            {form.getFieldDecorator('htmlid', {
            rules: [{ required: false, message: '请输入至少五个字符的html页面Id！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>




        <Col  md={12} sm={24}>
        <FormItem  label="层次码">
            {form.getFieldDecorator('levelcode', {
            rules: [{ required: false, message: '请输入至少五个字符的备注！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>
    </Row>

<Row gutter={{ md: 8, lg: 24, xl: 48 }}>




        <Col  md={12} sm={24}>
        <FormItem  label="节点级别">
            {form.getFieldDecorator('leaftype', {
            rules: [{ required: false, message: '请输入至少五个字符的html页面Id！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>




        <Col  md={12} sm={24}>
        <FormItem  label="层叠样式">
            {form.getFieldDecorator('cls', {
            rules: [{ required: false, message: '请输入至少五个字符的备注！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>
    </Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>


        <Col  md={12} sm={24}>
        <FormItem  label="备注">
            {form.getFieldDecorator('memo', {
            rules: [{ required: false, message: '请输入至少五个字符的备注！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>
    </Row>
</Form>
</Modal>
);
});

export default CreateForm;
